<template>
  <div id="friend_swiper">
    <swiper
      class="swiper"
      ref="mySwiper"
      :options="swiperOptions"
      v-if="friendsImages.length"
    >
      <swiper-slide v-for="item in friendsImages" :key="item.id">
        <img
          class="swiper_img"
          :src="show_url + item.logo"
          @click.stop="gotoFriends(item.url)"
        />
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

export default {
  name: "FriendSwiper",
  components: {
    swiper,
    swiperSlide,
  },
  props: ["friendsImages", "show_url"],
  data() {
    return {
      swiperOptions: {
        slidesPerView: 4,
        spaceBetween: 30,
        // centeredSlides: true,
        loop: true,
        observer: true,
        observeParents: true,
        autoplay: false,

        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    // 跳转到合作伙伴
    gotoFriends(url) {
      this.$emit("gotoFriends", url);
    },
  },
};
</script>

<style lang="less" scoped>
#friend_swiper {
  width: 100%;

  .swiper_img {
    width: 275px;
    height: 120px;
    background: #ffffff;
    z-index: 1;
  }

  /deep/.swiper-slide {
    // width: 308px !important;
  }

  /deep/.swiper {
    width: 100%;
    height: 120px;
  }

  /deep/.swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 30px;
    width: 60px;
    height: 60px;
    background: rgba(23, 24, 24, 0.8);
    backdrop-filter: blur(3px);
    border-radius: 50%;
    font-size: 6px;
    z-index: 99;
    opacity: 0.6;
    transition: opacity 0.3s ease-out;
  }
  /deep/.swiper-button-prev:hover,
  .swiper-button-next:hover {
    opacity: 1;
  }

  /deep/.swiper-button-prev {
    position: absolute;
    top: 30px;
    left: -30px;
    z-index: 99;
  }
  /deep/.swiper-button-next {
    position: absolute;
    top: 30px;
    right: -30px;
    z-index: 99;
  }
  /deep/.swiper-button-prev:after,
  .swiper-button-next:after {
    // display: none;
    font-size: 14px;
    color: #ffffff;
    z-index: 99;
  }

  .swiperBtn {
    width: 6px;
    height: 12px;
    z-index: 99;
  }
}
</style>
